body {
    /*
    Color Define
    */
    --ui-primary: hsla(215, 100%, 95%, 1);
    /* #E5F0FF */
    --ui-secondary: hsla(215, 75%, 95%, 1);
    /* #E9F1FC */
    --ui-tertiary: hsla(215, 50%, 90%, 1);
    /* #D9E3F2 */
    --ui-modal-overlay: hsla(215, 100%, 65%, 0.9);
    /* 90% transparent version of motion-primary */
    --ui-white: hsla(0, 100%, 100%, 1);
    /* #FFFFFF */
    --ui-white-dim: hsla(0, 100%, 100%, 0.75);
    /* 25% transparent version of ui-white */
    --ui-white-transparent: hsla(0, 100%, 100%, 0.25);
    /* 25% transparent version of ui-white */
    --ui-transparent: hsla(0, 100%, 100%, 0);
    /* 25% transparent version of ui-white */
    --ui-black-transparent: hsla(0, 0%, 0%, 0.15);
    /* 15% transparent version of black */
    --text-primary: hsla(225, 15%, 40%, 1);
    /* #575E75 */
    --text-primary-transparent: hsla(225, 15%, 40%, 0.75);
    --motion-primary: hsla(215, 100%, 65%, 1);
    /* #4C97FF */
    --motion-tertiary: hsla(215, 60%, 50%, 1);
    /* #3373CC */
    --motion-transparent: hsla(215, 100%, 65%, 0.35);
    /* 35% transparent version of motion-primary */
    --motion-light-transparent: hsla(215, 100%, 65%, 0.15);
    /* 15% transparent version of motion-primary */
    --red-primary: hsla(20, 100%, 55%, 1);
    /* #FF661A */
    --red-tertiary: hsla(20, 100%, 45%, 1);
    /* #E64D00 */
    --sound-primary: hsla(300, 53%, 60%, 1);
    /* #CF63CF */
    --sound-tertiary: hsla(300, 48%, 50%, 1);
    /* #BD42BD */
    --control-primary: hsla(38, 100%, 55%, 1);
    /* #FFAB19 */
    --data-primary: hsla(30, 100%, 55%, 1);
    /* #FF8C1A */
    --pen-primary: hsla(163, 85%, 40%, 1);
    /* #0FBD8C */
    --pen-transparent: hsla(163, 85%, 40%, 0.25);
    /* #0FBD8C */
    --error-primary: hsla(30, 100%, 55%, 1);
    /* #FF8C1A */
    --error-light: hsla(30, 100%, 70%, 1);
    /* #FFB366 */
    --error-transparent: hsla(30, 100%, 55%, 0.25);
    /* #FF8C1A */
    --extensions-primary: hsla(163, 85%, 40%, 1);
    /* #0FBD8C */
    --extensions-tertiary: hsla(163, 85%, 30%, 1);
    /* #0B8E69 */
    --extensions-transparent: hsla(163, 85%, 40%, 0.35);
    /* 35% transparent version of extensions-primary */
    --extensions-light: hsla(163, 57%, 85%, 1);
    /* opaque version of extensions-transparent, on white bg */
    --drop-highlight: hsla(215, 100%, 77%);
    /* lighter than motion-primary */
    /* make sure to keep these in sync with other constants,
e.g. STAGE_DIMENSION_DEFAULTS in lib/screen-utils.js */
    --space: 0.5rem;
    --sprites-per-row: 5;
    --menu-bar-height: 3rem;
    --language-selector-width: 3rem;
    --sprite-info-height: 6rem;
    --stage-menu-height: 2.75rem;
    --library-header-height: 3.125rem;
    --library-filter-bar-height: 2.5rem;
    --stage-standard-border-width: 0.0625rem;
    --stage-full-screen-border-width: 0.1875rem;
    --stage-full-screen-stage-padding: 0.1875rem;
    --form-radius: calc(--space / 2);
    /* layout contants from `layout-constants.js` */
    --full-size: 1095px;
    --full-size-paint: 1249px;
    --menu-bar-standard-font-size: 0.75rem;
    --menu-bar-large-font-size: 0.875rem;
    --menu-bar-button-size: 2rem;
    --menu-bar-item-max-width: 12rem;
    /*
    Contains constants for the z-index values of elements that are part of the global stack context.
    In other words, z-index values that are "inside" a component are not added here.
    This prevents conflicts between identical z-index values in different components.
    */
    /* Toolbox z-index: 40; set in scratch-blocks */
    --z-index-extension-button: 42;
    --z-index-stage-indicator: 45;
    --z-index-add-button: 46;
    --z-index-tooltip: 47;
    /* tooltips should go over add buttons if they overlap */
    --z-index-monitor: 48;
    /* monitors go over add buttons */
    --z-index-stage-question: 49;
    /* "ask" block text input goes above monitors */
    --z-index-card: 480;
    --z-index-alerts: 490;
    --z-index-menu-bar: 491;
    /* menu-bar should go over monitors, alerts and tutorials */
    --z-index-loader: 500;
    --z-index-modal: 510;
    --z-index-drag-layer: 1000;
    /* Block drag z-index: 1000; default 50 is overriden in blocks.css */
    --z-index-monitor-dragging: 1010;
    --z-index-dragging-sprite: 1020;
    /* so it is draggable into other panes */
    --z-index-stage-color-picker-background: 2000;
    --z-index-stage-with-color-picker: 2010;
    --z-index-stage-header: 5000;
    --z-index-stage-wrapper-overlay: 5000;
    /* in most interfaces, the context menu is always on top */
    --z-index-context-menu: 10000;
}

.custom-overlays {
    position: absolute;
    top: 0;
    left: 0;
}